<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>搜索</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/config.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/vue-router.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
	<style>
		body{
				-moz-user-select:none;/*火狐*/
				-webkit-user-select:none;/*webkit浏览器*/
				-ms-user-select:none;/*IE10*/
				-khtml-user-select:none;/*早期浏览器*/
				user-select:none;
		}
</style>
</head>

<body class="bodybg">
	<div id="app" v-cloak>
		<div class="topss topFixed">
			<div class="topssbox">
				<img src="img/index/s.png" />
				<input type="text" placeholder="搜索你感兴趣的课程" class="ss-input" v-model="keyword" @keyup.enter="submit" />
			</div>
		</div>
		<div class="category-wrapper category-wrapper2">
			<div class="hotbox category-cells">
				<ul class="kecheng-cells">
					<nut-infiniteloading @loadmore="loadMore()" :has-more="hasMore" :is-loading="loading"
						:is-showMod="true" unload-more-txt="没有更多了">
						<li class="d-f j-c-s a-c-c" v-for="item in dataList" @click="goStudy(item)">
							<div class="hotbox-top">
								<img v-bind:src="item.data.cover_url" class="product-img" />
								<div class="hotbox-label">
									<div class="spsc d-f a-c-c">
										<img src="img/index/shipin.png" class="spsc-icon" />
										<span class="spsc-num">{{ durationFormat(item.data.duration) }}</span>
									</div>
									<div class="spsc d-f a-c-c" v-else></div>
									<div class="sp-label">
										<button class="sp-label-btn" v-if="1==item.type">视频</button>
										<button class="sp-label-btn zhuanlan" v-else>专栏</button>
									</div>
								</div>
							</div>
							<div class="keshi-xq flex1">
								<p class="product-title">{{item.data.title}}</p>
								<div class="product-leibie">
									<span>{{ 2 == item.type ? ('共' + item.data.video_count + '节课') : '' }}</span>
									<span>热度{{ item.hot }}</span>
								</div>
							</div>
						</li>
					</nut-infiniteloading>
				</ul>
			</div>
		</div>
	</div>
</body>
<script>
	let router = new VueRouter({
		mode: 'history'
	})
	var vue = new Vue({
		el: "#app",
		router,
		data() {
			return {
				keyword: '',
				page: 1,
				hasMore: true,
				loading: false,
				dataList: [],
			}
		},
		created() {
			this.keyword = this.$route.query.keyword;
			this.getList();
		},
		methods: {
			getList() {
				this.loading = true;
				axios.get('/mp/video/search', {
					params: {
						keyword: this.keyword,
						page: this.page
					}
				}).then(res => {
					this.loading = false;
					this.dataList = res.data
					this.hasMore = 10 === res.data.length;
					// 当查询的是第一页时，增加搜索历史
					if (1 == this.page) {
						this.addWords();
					}
				})
			},

			// 增加搜索历史
			addWords() {
				const words = JSON.parse(localStorage.getItem('keywords') || '[]');
				const oldIndex = words.indexOf(this.keyword);
				if (oldIndex >= 0) {
					words.splice(oldIndex, 1);
				}
				words.unshift(this.keyword);
				localStorage.setItem('keywords', JSON.stringify(words));
			},

			// 搜索
			submit() {
				const keyword = this.keyword.trim();
				if ('' === keyword) {
					return;
				}
				window.location.href = '/sousuojieguo.html?keyword=' + encodeURIComponent(keyword);
			},

			// 加载更多
			loadMore() {
				this.page++;
				this.getList();
			},

			goStudy(item) {
				window.location.href = (1 == item.type ? '/shipinxuexi.html?id=' : '/zhuantimulu.html?id=') + item.data.id
			},

			// 时间格式化
			durationFormat(second) {
				let time = '';
				if (second > 3600) {
					
					// 超过1小时
					time = parseInt(second / 3600)
					if(time < 10) time = "0" + time
					time = time + ':';
					second = second % 3600;
				}
				let minutes = parseInt(second / 60)
				if(minutes < 10){
					minutes = "0"+minutes
				}
				second = parseInt(second % 60)
				if(second < 10){
					second = "0" + second
				}
				return time + minutes  + ':' + second;
			},
		}
	})
</script>

</html>